<template>
  <div>
    <input type="text" v-model="name">
    <button @click="add()">添加</button>
    <ul>
      <!--      鼠标移入/移除事件-->
      <li :class="{on:item.on}"
          @mousemove="over(index)" @mouseout="out()"
          v-for="(item,index) in arrObj" :key="item.id">
        <input type="checkbox">
        {{index}}-{{item.name}}-{{item.num}}-{{item.price}}
      </li>
    </ul>
  </div>
</template>

<script>

export default {
  name: "App",
  data(){
    return{
      name:'',
      newId:5,
      arrObj :[
        {id:1,name:'手机',num:2,price:3000,on:false},
        {id:2,name:'电脑',num:3,price:1000,on:false},
        {id:3,name:'女装',num:5,price:500,on:false},
        {id:4,name:'男装',num:7,price:100,on:false},
      ]
    }
  },
  methods:{
    over(index){
      for (let i=0;i<this.arrObj.length;i++){
        if(index == i){
          this.arrObj[index].on = true;
        }
      }
    },
    out(){
      for (let i=0;i<this.arrObj.length;i++){
        this.arrObj[i].on = false;
      }
    },
    add(){
      this.arrObj.unshift({id:++this.newId,name:this.name,num:3,price:50,on:false});
      this.name = ''
    }
  }
}
</script>

<style scoped>
li{
  list-style: none;
}
.on{
  color: red;
}
</style>